<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<style type="text/css">
#picture{
		position: absolute;
		right: 70px;
		top: 40px; 
		height: 200px;
		width:30%;
	}
	fieldset{
		height: 92%;
		border-radius: 5px;
		text-align:center;
		border:1px solid #000000;
	}
ul{
	list-style:none;
}
</style>    
<div style="padding:10px 10px 0px 10px;position: relative;" >
<form id="goodsAddForm" name="goodsAddForm" class="goodsForm" method="post"  >
	    <table cellpadding="5">
	    
	        <tr>
	            <td>商品类目:</td>
	            <td>
	            	<a href="javascript:void(0)" class="easyui-linkbutton selectGoodsClass">选择类目</a>
	            	<input type="hidden" name="cId" style="width: 280px;"></input><!-- 用来选择的类目id -->
	            	<span id="className"></span> <!--  显示节点文本 -->
	            </td>
	        </tr>
	        <tr>
	            <td>商品标题:</td>
	            <td><input class="easyui-textbox" type="text" name="gTitle" data-options="required:true" style="width: 280px;"></input></td>
	        </tr>
	        <tr>
	            <td>商品卖点:</td>
	            <td><input class="easyui-textbox" name="gSellPoint" data-options="multiline:true,validType:'length[0,150]'" style="height:60px;width: 280px;"></input></td>
	        </tr>
	        <tr>
	            <td>商品价格:</td>
	            <td><input class="easyui-numberbox" type="text" name="gPrice" data-options="min:1,max:99999999,precision:2,required:true" />
	            	
	            </td>
	        </tr>
	        <tr>
	            <td>库存数量:</td>
	            <td><input class="easyui-numberbox" type="text" name="gnum" data-options="min:1,max:99999999,precision:0,required:true" /></td>
	        </tr> 
	        <tr>
	            <td>条形码:</td>
	            <td>
	                <input class="easyui-textbox" type="text" name="gBarcode" data-options="validType:'length[1,30]'" />
	                <input id="gMainImage"  name="gMainImage" type="hidden" />
	            </td>
	        </tr>
	        
	        </table>
	    </form>
	         <div id='picture'>
					<p>图片最适宽*高=300*240，宽高比例5:4</p>
					<fieldset id="article_artPic_show">
						<legend>图片预览</legend>
					</fieldset>
			</div>’
</div>
	        
<div id="formatAndProperty"  style="padding:0px 10px 10px 10px;">
	        <table>
	        <tr>
	            <td>商品图片:</td>
	            <td>
	            <form id="mainImageForm" method="post" enctype="multipart/form-data" action="ued/config">
	            	<input type="file" name="upfile" onchange="getPic(this)">
	            	<input name="action" value="uploadimage" type="hidden">
	            	<a href="javascript:void(0)" class="easyui-linkbutton " id="btn_submit">点击上传主图</a>
	            </form>
	            </td>
	        </tr>
	        <tr>
	            <td>商品描述:</td>
	        </tr>
	    </table>
	    <div id="goods_discribe" style=" overflow: hidden;">
					<script id="goodsUE" name="deContent" type="text/plain" style="width:80%;height:400px; "></script>
					</div>
	    <table cellpadding="5">
	    	<tr class="params hide">
	        	<!-- <td>商品规格:</td> -->
	        	
	        </tr>
	    </table>
	    <table cellpadding="5" class="property hide" >
	    
	    </table>
	   
	
	<div style="padding:5px">
	    <a href="javascript:void(0)" class="easyui-linkbutton" onclick="submitForm()">提交</a>
	    <a href="javascript:void(0)" class="easyui-linkbutton" onclick="clearForm()">重置</a>
	</div>
</div>
		<script type="text/javascript" src="js/ajaxfileupload.js"></script>
		<script type="text/javascript" charset="utf-8" src="ueditor/ueditor.config.js"></script>
		<script type="text/javascript" charset="utf-8" src="ueditor/ueditor.all.js"> </script>
		<script type="text/javascript" charset="utf-8" src="ueditor/lang/zh-cn/zh-cn.js"></script>
<script type="text/javascript">
		var UEditor=UE.getEditor('goodsUE');//实例化编辑器
$(function(){
		//初始化类目组件
			var classWindow=$("<div>").css({padding:"5px"}).html("<ul>")
			.window({
				width:'500',
			    height:"450",
			    modal:true,
			    closed:true,
			    iconCls:'icon-save',
			    title:'选择类目',
			    onOpen : function(){
			    	var _win = this;
			    	$("ul",_win).tree({
			    		url:'item/classList',
			    		animate:true,
			    		onClick : function(node){
			    			$("#formatAndProperty .params").html("<td>商品规格:</td>");
			    			if($(this).tree("isLeaf",node.target)){
			    				// 填写到cid中
			    				$("#goodsAddForm [name=cId]").val(node.id);//分类id添加到input
			    				$("#className").html(node.text);//分类名用来显示
			    				
			    				
								//生成规格表
			    		    	$.getJSON("format/selectFormatInfoByCid/" + node.id,function(data){
			    					  if(data.status == 200 && data.data){
			    						 $("#formatAndProperty .params").show();
			    						 var paramData = JSON.parse(data.data.gfParamData);
			    						
			    						 for(var i in paramData){
			    							 var html = "<td><ul>";
			    							 var pd = paramData[i];
			    							 html+="<li><table>";
			    							 html+="<tr><td style=\"text-align:center\" colspan=\"2\" class=\"group\">"+pd.group+"</td></tr>";
			    							 
			    							 for(var j in pd.params){
			    								 var ps = pd.params[j];
			    								 html+="<tr><td class=\"param\"><span>"+ps+"</span>: </td><td><input class=\"inputId\"  type=\"text\"  type=\"text\"/></td></tr>";
			    							 }
			    							 
			    							 html+="</li></table>";
			    							 html+= "</ul></td>";
			    							 $("#formatAndProperty .params").append($(html));
			    						 }
			    						 //$(_win).window('close');
			    						 
			    					  }else if(data.status==400){
			    						 // $.messager.alert('提示','该分类没有规格信息，请先添加规格信息!','info');
			    						  $.messager.confirm('提示', '该分类没有规格信息，是否进入添加规格页面?', function(r){
			    								if (r){
			    									 $('#center_content').panel({ 
						    				    			loadingMessage:'数据加载中...',
						    				    			 fit:true,
						    				    			  title: "规格属性",
						    				    			  href:"goods-class"
						    				    			});  
			    									 return;
			    								}
			    							});
			    					  }
			    				  });
								
			    		    	//生成属性表
			    		    	$("#formatAndProperty .property").html("<tr><td>商品属性:</td></tr>");
			    		    	$.getJSON("property/selectPropertyInfoByCid/" + node.id,function(data){
			    					  if(data.status == 200 && data.data){
			    						 $("#formatAndProperty .property").show();
			    						 var paramData = JSON.parse(data.data.gpParamData);
			    						 
			    						 for(var i in paramData){
			    							 var html = '<tr><td><span>'+ paramData[i]+'</span>: <input  style=\"width: 150px;\" class=\"inputId\" name=\"param\"/>&nbsp;<button class="addButton" type="button">添加</button></td></tr>';
			    						
			    							 $("#formatAndProperty .property").append($(html));
			    						 }
			    						 $(".addButton").click(function(){
			    						    	 var htm="<input  style=\"width: 150px;\" class=\"inputId\" name=\"param\"/>&nbsp;&nbsp;&nbsp;";
			    						    	$(htm).insertBefore(this); 
			    						    	$(".inputId").textbox({
					    							disabled:false
					    						}); 
			    						    });
			    						 $(_win).window('close');
			    						 
			    					  }else if(data.status==400){
			    						  //$.messager.alert('提示','该分类没有规格信息，请先添加规格信息!','info');
			    						  
			    						  $.messager.confirm('提示', '该分类没有规格信息，是否进入添加规格页面?', function(r){
			    								if (r){
			    									 $('#center_content').panel({ 
						    				    			loadingMessage:'数据加载中...',
						    				    			 fit:true,
						    				    			  title: "规格属性",
						    				    			  href:"goods-class"
						    				    			});  
			    									 return;
			    								}
			    							});
			    						 
			    					  }
			    					  $(".inputId").textbox({
			    							disabled:false
			    						}); 
			    				  });
			    			}
			    		}
			    	});
			    },
			});
			
		$(".selectGoodsClass").click(function(){
			classWindow.window('open');
			});
		//主图上传事件
		$('#btn_submit').bind('click', function(){  
		if($("#mainImageForm [name=upfile]").val()==""&&$("#mainImageForm [name=upfile]").val()==null){
			$.messager.alert('提示','请先选择要上传的图片!','info');
			return;
		}
			$.messager.progress();	// 显示一个进度条 
			$('#mainImageForm').form('submit',{
				url:'ued/config',
			    	success:function(data){
			    			$("#gMainImage").val(JSON.parse(data).url);
			    			$.messager.progress('close');	// 当成功提交之后隐藏进度条
				    		$.messager.show({
				    			title:'提示',
				    			msg:'主图上传成功',
				    			timeout:4000,
				    			showType:'slide'
				    		});
			    }
			}); 
	    }); 
});
function getPic(objs){
	var files=objs.files;
	var picPath=window.URL.createObjectURL(files[0]);
	var imgStr= "<img src='"+picPath+"'  style='height:144px;width:180px'/>";
	document.getElementById("article_artPic_show").innerHTML = imgStr;
}
function clearForm(){
	$('#goodsAddForm').form('reset');
	UEditor.setContent("");
}

function submitForm(){
	//验证
	
 	 if(!$('#goodsAddForm').form('validate')){
		$.messager.alert('提示','表单还未填写完成!',"info");
		return ;
	} else if($("#gMainImage").val()==""){
		$.messager.alert('提示','商品主图未上传!',"info");
		return ;
	}else if($("#goodsAddForm [name=cId]").val()==""){
		$.messager.alert('提示','请选择商品类目!',"info");
		return ;
	}
 	$.messager.progress();	// 显示一个进度条 
	 //主体数据获取
	 var params =$("#goodsAddForm").serialize();
	
	//规格数据获取
	 var paramJson = [];//规格数据生成json对象
	$("#formatAndProperty .params li").each(function(i,e){
		var trs = $(e).find("tr");
		var group = trs.eq(0).find("td").text();
		var ps = [];
		for(var i = 1;i<trs.length;i++){
			var tr = trs.eq(i);
			ps.push({
				"k" : $.trim(tr.find("td").eq(0).find("span").text()),
				"v" : $.trim(tr.find("input").eq(1).val())
			});
		}
		paramJson.push({
			"group" : group,
			"params": ps
		});
	}); 
	//属性数据获取
	var propertys = [];
	$("#formatAndProperty .property tr").each(function(i,e){
		
		if(i!=0){ //第一个tr不循环
		  var property= $(e).find("span").eq(0).text();
		var val="";
		 var valsInput=$(e).find("input");
		 var j=valsInput.length;
		for(var i = 2;i<j;i=i+3){
			val+=valsInput.eq(i).val()+",";
		}
		val=val.substring(0,val.lastIndexOf(","));
		propertys.push({
			"property" : property,
			"params": val
		});
		}
	});
	 $.post("goods/addGoods",{
		 cId:$("#goodsAddForm [name=cId]").val(),
		 gTitle:$("#goodsAddForm [name=gTitle]").val(),
		 gSellPoint:$("#goodsAddForm [name=gSellPoint]").val(),
		 gPrice:parseInt($("#goodsAddForm [name=gPrice]").val()*100),
		 gnum:$("#goodsAddForm [name=gnum]").val(),
		 gBarcode:$("#goodsAddForm [name=gBarcode]").val(),
		 gMainImage:$("#goodsAddForm [name=gMainImage]").val(),
		 describeData:UEditor.getContent()+"",
		 formatData:JSON.stringify(paramJson)+"",
		 propertyData:JSON.stringify(propertys)+""
	 },function(data){
		if(data.status==200){
			$.messager.show({
    			title:'提示',
    			msg:'新增商品成功,可以进入查询商品界面查看',
    			timeout:4000,
    			showType:'slide'
    		});
			clearForm();
		}else{
			$.messager.alert('提示','参数填写错误!','info');
		}
	}); 
	 $.messager.progress('close');	// 当成功提交之后隐藏进度条
}

</script>